<template>
    <div class="main">
        <div class="list" v-for="(i, d) in list" :key="i.id">
            <div class="goods content" v-if="i.type == 1" data-aos="fade" data-aos-duration="1000"
                :class="{ img1: d == 0, img2: d != 0 }" v-lazy-load2>
                <!-- 第一个图片 -->
                <img v-if="i.txt" :data-src="i.url" src="" alt="" class="lazy-img">
                
                <!-- 第二个图片（主要图片） -->
                <img :class="{ txt: i.txt }" 
                     :data-aos="i.txt ? 'fade-up' : 'fade'" 
                     data-aos-delay="300"
                     data-aos-easing="linear" 
                     data-aos-duration="1000" 
                     :data-src="i.txt ? i.txt : i.url"
                     src=""
                     @click="goLink(i.link)" 
                     :style="{ cursor: i.link ? 'pointer' : 'default' }"
                     class="lazy-img">
                
                <!-- 第三个图片 -->
                <img v-if="i.txt2" class="txt2 lazy-img" 
                     data-aos="fade-up" 
                     data-aos-delay="1200" 
                     data-aos-easing="linear"
                     data-aos-duration="1000" 
                     :data-src="i.txt2"
                     src="">
            </div>
            <div v-if="i.type == 10 && $store.state.winWidth > 768" class="swiper">
                <carousel :list="i.more" />

            </div>
            <div v-if="i.type == 10 && $store.state.winWidth <= 768" class="swiper">
                <mobSwiper :autoplay="false" @typeChange="typeChange" :list="i.more" />
            </div>
            <div :class="{ video: true, img1: d == 0 }"   v-lazy-load="i.url" v-if="i.type == 5 && i.url">
                <video muted :autoplay="true" :loop="true" ></video>
            </div>
        </div>
        <img class="kong" data-aos-delay="500" data-aos="fade" data-aos-duration="1000" v-if="list.length==0 " src="https://api.fgqslc.com/none.png" alt="">
    </div>
</template>

<script>
import carousel from '@/components/carousel.vue';
import mobSwiper from '@/components/mobSwiper.vue'
export default {
    components: {
        carousel,
        mobSwiper
    },
    data() {
        return {
            current: 0,
            list: [],
            loading:true,
        }
    },
    mounted() {

        let id = this.$route.query.id
        let op = this.$route.query.op
        
        this.getData(id, op)

    },


    computed: {
        id() {
            return this.$route.query.id
        },

        op() {
            return this.$route.query.op
        },
    },
    watch: {
        id(n) {
            this.getData(n, this.op)
            window.scrollTo({
                top: 0,
                behavior: 'smooth' // 平滑滚动
            });
        },

        op(n) {
            this.getData(this.id, n)
        },
    },
    methods: {
        // 跳转外部链接
        goLink(url) {
            if(!url){
                return
            }

            // 检查url是否以http://或https://开头
            if (!/^https?:\/\//i.test(url)) {
                // 如果不是外部链接，使用router.resolve处理
                const route = this.$router.resolve({
                    path: url,
                });
                window.open(route.href, '_blank');
            } else {
                // 如果是外部链接，直接打开
                window.open(url, '_blank');
            }
            // 另页打开
        },
        change(e) {
            this.current = e
        },
        getData(id, op) {
            let width = this.$store.state.winWidth
            if(width<=768){
                this.$api.getMobileDetail({ id, op }).then(res => {
                if (res.code == 1) {
                    this.list = res.data.list
                    this.loading=false
                }
            })
            }else{
                this.$api.getDetail({ id, op }).then(res => {
                if (res.code == 1) {
                    this.list = res.data.list
                    this.loading=false
                }
            })
            }
           
        },
      
    }
}
</script>

<style lang="scss" scoped>
.main {
    font-size: 0;
    min-height: 500px;
}

.img1,
.img2 {
    position: relative;
    overflow-x: hidden;

    img {
        width: 100vw;
        height: auto;
    }

    .info {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 155px;
        width: 100%;
        left: 0;
        right: 0;
        color: #fff;

        .title {
            margin: 0 0 30px;
            font-family: MiSans;
            font-weight: 600;
            font-size: 61px;
            color: #FFFFFF;
        }

        >span {
            display: block;
            margin: 0 0 20px;
            font-family: MiSans;
            font-weight: 500;
            font-size: 30px;
            color: #FFFFFF;
        }

        // .info_1 {
        //     display: flex;
        //     align-items: center;
        //     font-weight: 500;
        //     font-size: 30px;
        //     color: #FFFFFF;
        // }
    }

}


.img2 {
    padding-top: 0;
}

::v-deep .el-divider--vertical {
    margin: 0 30px;
    width: 3px;
}

.video {
    width: 100%;

    video {
        width: 100%;
        height: auto;
    }
}
.goods{
    min-height: 500px;
    position: relative;
    overflow: hidden;
    .txt2{
        position: absolute;
        z-index: 221;
        top: 0;
        left: 0;
        width: 100vw;
        height: auto;
    }
    .txt{
        position: absolute;
        z-index: 222;
        top: 0;
        left: 0;
        width: 100vw;
        height: auto;
    }
}
.swiper{
    overflow-x: hidden;
}
.img1,
.img2 {
    position: relative;
    overflow-x: hidden;

    img {
        width: 100vw;
        height: auto;
        
        &.lazy-img {
            opacity: 0;
        }
        
        &.lazy-loaded {
            opacity: 1;
        }
        
        &.lazy-error {
            opacity: 1;
            filter: grayscale(80%);
        }
    }

    .info {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 65px;
        width: 100%;
        left: 0;
        right: 0;
        color: #fff;

        .title {
            margin: 0 0 30px;
            font-family: MiSans;
            font-weight: 600;
            font-size: 61px;
            color: #FFFFFF;
        }

        >span {
            display: block;
            margin: 0 0 20px;
            font-family: MiSans;
            font-weight: 500;
            font-size: 30px;
            color: #FFFFFF;
        }
    }
}
.kong{
    width: 100vw;
    height: auto;
}
</style>